<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div id="broken" style="width: 100%; height: 100%"></div>
</template>

<script setup name="GMVnearly">
import * as echarts from 'echarts'
import { onMounted } from 'vue'

const getEcharts = () => {
    var chartDom = document.getElementById('broken')
    var myChart = echarts.init(chartDom)
    window.addEventListener('resize', function () {
        myChart.resize();
    });
    const option = {
        tooltip: {
            //鼠标悬停时显示对应数据
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        color: ['#87A2E8FF', '#74CCCCFF'],
        title: {
            text: '近一年的DAU/DNU',
            top: '8px',
            left: '10px',
            bottom: '8px',
            textStyle: {
                color: '#191e24',
                fontSize: '14',
            },
        },
        legend: {
            // 图例
            data: ['DAU', 'DNU'],
            top: 8,
            right: 16, // 修改位置
            icon: 'circle', //原型
            textStyle: {
                color: '#191e2480', //字体颜色
            },
        },
        grid: {
            // 上下左右 边距
            top: '8%',
            left: '3%',
            right: '3%',
            bottom: '8%',
            // eslint-disable-next-line no-dupe-keys
            top: '15%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                data: [
                    '1月',
                    '2月',
                    '3月',
                    '4月',
                    '5月',
                    '6月',
                    '7月',
                    '8月',
                    '9月',
                    '10月',
                    '11月',
                    '12月',
                ],
                axisLine: {
                    // 轴线的颜色以及宽度
                    lineStyle: {
                        color: '#A6A6A628',
                    },
                },
                axisLabel: {
                    // 轴文字的配置
                    show: true,
                    textStyle: {
                        color: '#191e2480',
                    },
                },
                splitLine: {
                    // 分割线配置
                    lineStyle: {
                        color: '#A6A6A628',
                        // type: "dashed", // 虚线
                    },
                },
            },
        ],
        yAxis: [
            {
                min: 0, // 最小值
                // splitNumber: 3, //划分3格
                type: 'value',
                axisLine: {
                    // 轴线的颜色以及宽度
                    show: false,
                },
                axisLabel: {
                    // 轴文字的配置
                    show: true,
                    //   textStyle: {
                    //     color: "#fff",
                    //   },
                },
                splitLine: {
                    // 分割线配置
                    lineStyle: {
                        color: '#A6A6A628',
                        // type: "dashed",
                    },
                },
            },
        ],
        series: [
            {
                name: 'DAU',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series',
                },
                data: [120, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230],
            },
            {
                name: 'DNU',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series',
                },
                data: [120, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 290],
            },
        ],
    }
    option && myChart.setOption(option)
    window.onresize = () => {
        myChart.resize()
    }
}
onMounted(() => {
    setTimeout(() => {
        getEcharts()
    }, 1000)
})
</script>
